<template>
  <m-box title="物料配套" class="material-match">
    <ul class="w-row">
      <li class="w-item">
        <div class="w-item__title">工单齐套率</div>
        <div class="w-item__content">
          <dashboard-chart class="d-c" :val="moRate" />
        </div>
      </li>
      <li class="w-item">
        <div class="w-item__title">发料及时率</div>
        <div class="w-item__content">
          <dashboard-chart class="d-c" :val="timelyIssuanceRate" :colors="lightColors" />
        </div>
      </li>
    </ul>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import dashboardChart from './widget/dashboardChart/index.vue'

const moRate = ref(0)
const timelyIssuanceRate = ref(0)

const lightColors = ref([
  [0.25, 'rgb(255, 64, 105)'],
  [0.5, 'rgb(255, 194, 52)'],
  [0.75, 'rgb(5, 155, 255)'],
  [1, 'rgb(75, 192, 192)']
])

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/GetAssembleAnalysisRateReport')
    moRate.value = res.moRate
    timelyIssuanceRate.value = res.timelyIssuanceRate
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.material-match {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 100%;
          // padding: 20px;
          display: flex;
          justify-content: center;

          .w-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 40px;
            .w-item__title {
              display: inline-block;
              font-size: 18px;
              font-weight: 700;
              color: rgb(24, 186, 214);
              padding: 0 10px;
              margin-bottom: 5px;
              line-height: 40px;
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              width: 140px;
              height: 140px;
              overflow: hidden;
              .d-c {
                width: 100%;
                height: 100%;
                position: relative;
                .dashboard-echart__content {
                  width: 240px !important;
                  height: 240px !important;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%) scale(0.78);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
